<template>
	<div>
		<form @submit.prevent="nextStep">
			<div class="carEditorSubmit" @click="submit" style="z-index: 10;">
				<button class="button button-icon" slot="right" type="submit" style="color: #fff; z-index: 0;">下一步</button>
			</div>
			<div class="page has-navbar has-tabbar" v-nav="{title: '申请入库', showBackButton: true}">
				<div class="page-content padding-top reserve-margin">
					<div class="car-editor">
						<div class="reserve">
							<list>
								<!--必填 增加on-->
								<item>
									<div class="car-enitor-tr on active" @click="regionNameFn">
										<div class="car-editor-name">车场区域</div>
										<div class="car-editor-input"><input type="text" v-model="routerParams.region.regionName" required readonly /><input type="hidden" name="regionId" v-model="routerParams.regionId" /></div>
										<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
									</div>
								</item>
								<item v-if="!userSession.shopId">
									<div class="car-enitor-tr on active" @click="shopNameFn">
										<div class="car-editor-name">商铺列表</div>
										<div class="car-editor-input"><input type="text" v-model="routerParams.shop.shopName" readonly /><input type="text" name="shopId" v-model="routerParams.shopId" class="none" /></div>
										<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
									</div>
								</item>
								<input type="text" v-else name="shopId" v-model="userSession.shopId" class="none" />
								<item>
									<div class="car-enitor-tr on active">
										<div class="car-editor-name">车驾号</div>
										<div class="car-editor-input"><input type="text" v-model="carVin" name="carVin" placeholder="请填写17位字母数字组成的编码" pattern="^([0-9A-Z]){17}$" required  onkeyup="this.value=this.value.replace(/\W/g,'')" onafterpaste="this.value=this.value.replace(/\W/g,'')" maxlength = 17  /></div>
										<div class="car-editor-right"><i @click="fileClick" class="ion-android-camera" style="font-size: 32px; color: #FF6816;"></i></div>
									</div>
									<input type="file" ref="fileImg" @change="fileFn" accept="image/*" class="none" />
								</item>
								<item>
									<div class="car-enitor-tr on active" @click="brandNameFn">
										<div class="car-editor-name">品牌车系</div>
										<div class="car-editor-input"><input type="text" :value="routerParams.brand.brandName+' '+routerParams.series.seriesName" readonly required /><input type="text" name="brandId" v-model="routerParams.brandId" class="none" /><input type="text" name="modelId" v-model="routerParams.modelId" class="none" /><input type="text" name="seriesId" v-model="routerParams.seriesId" class="none" /></div>
										<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
									</div>
								</item>
								<item>
									<div class="car-enitor-tr on active">
										<div class="car-editor-name">宣传标题</div>
										<div class="car-editor-input"><input type="text" name="carTitle" v-model="routerParams.carTitle" required /></div>
										<div class="car-editor-right"></div>
									</div>
								</item>
								
								<item>
									<div class="car-enitor-tr on active">
										<div class="car-editor-name">行驶里程</div>
										<div class="car-editor-input"><input type="number" required step="0.0001" min="0.0001" max="99.9999" v-model="routerParams.carMileage" placeholder="请输入行驶里程" name="carMileage" /></div>
										<div class="car-editor-right">万公里</div>
									</div>
								</item>
								<item>
									<div class="car-enitor-tr on active" @click="carLicenceStatusFn">
										<div class="car-editor-name">是否已上牌</div>
										<div class="car-editor-input">{{routerParams.carLicenceState | filterCarLicenceStatus}}<input type="text" v-model="routerParams.carLicenceState" name="carLicenceState" class="none" /></div>
										<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
									</div>
								</item>
								<item :class="{noedit: routerParams.carStockState >= 10}" v-if="routerParams.carLicenceState==1">
									<div class="car-enitor-tr on active">
										<div class="car-editor-name">首次上牌年月</div>
										<div class="car-editor-input"><input v-once type="month" ref="carLicenceDate" v-model="carLicenceDate" required class="month-one" />
                      <input type="text" name="carLicenceDate"  :value="routerParams.carLicenceDate | filterDateForMonthTwo" readonly class="month-two" >
                    </div>
										<div class="car-editor-right"></div>
									</div>
								</item>
								<!--<item v-if="routerParams.carLicenceState==1">
									<div class="car-enitor-tr on">
										<div class="car-editor-name">出厂年月</div>
										<div class="car-editor-input"><input v-once type="month" :value="routerParams.carFacotryDate | filterDateForMonthTwo" name="carFacotryDate" /></div>
										<div class="car-editor-right"></div>
									</div>
								</item>-->
								<item :class="{noedit: routerParams.carStockState >= 10}" v-if="routerParams.carLicenceState==1">
									<div class="car-enitor-tr on">
										<div class="car-editor-name">年审日期</div>
										<div class="car-editor-input"><input v-once type="month" class="month-one" v-model="carValidateDate" name="carValidateDate" />
                      <input type="text" :value="routerParams.carValidateDate | filterDateForMonthTwo" readonly class="month-two" >
                    </div>
										<div class="car-editor-right"></div>
									</div>
								</item>
								<item>
									<div class="car-enitor-tr on">
										<div class="car-editor-name">商业险到期</div>
										<div class="car-editor-right">
											<div class="item item-borderless item-toggle von-toggle">
												<label class="toggle toggle-balanced">
										            <input type="checkbox" v-model="carBusinessInsuranceDateTrue">
										            <div class="track">
										            	<div class="handle"></div>
										            </div>
										        </label>
											</div>
										</div>
										<!--<input type="text" v-model="" />-->
									</div>
								</item>
								<item v-if="routerParams.carLicenceState==1&&!carBusinessInsuranceDateTrue">
									<div class="car-enitor-tr on">
										<div class="car-editor-name">商业险日期</div>
										<div class="car-editor-input"><input v-once class="month-one" type="month" name="carBusinessInsuranceDate" v-model="carBusinessInsuranceDate" />
                      <input type="text" :value="routerParams.carBusinessInsuranceDate | filterDateForMonthTwo" readonly class="month-two" >
                    </div>
										<div class="car-editor-right"></div>
									</div>
								</item>
								<item v-if="routerParams.carLicenceState==1">
									<div class="car-enitor-tr on">
										<div class="car-editor-name">交强险日期</div>
										<div class="car-editor-input"><input v-once type="month" class="month-one" name="carForceInsuranceDate" v-model="carForceInsuranceDate" />
                      <input type="text" :value="routerParams.carForceInsuranceDate | filterDateForMonthTwo" readonly class="month-two" >
                    </div>
										<div class="car-editor-right"></div>
									</div>
								</item>
								<!--<item v-if="routerParams.carLicenceState==1">
									<div class="car-enitor-tr on">
										<div class="car-editor-name">车船税日期</div>
										<div class="car-editor-input"><input type="month" v-once name="carVehicletaxDate" :value="routerParams.carVehicletaxDate | filterDateForMonthTwo" /></div>
										<div class="car-editor-right"></div>
									</div>
								</item>-->
								<item>
									<div class="car-enitor-tr on" @click="carKeyNumFn">
										<div class="car-editor-name">钥匙数量</div>
										<div class="car-editor-input"><input type="text" name="carKeyNum" v-model="routerParams.carKeyNum" readonly placeholder="请选择钥匙数量" /></div>
										<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
									</div>
								</item>
								<item>
									<div class="car-enitor-tr on active" @click="carOutColorFn">
										<div class="car-editor-name">外观颜色</div>
										<div class="car-editor-input"><input type="text" v-model="routerParams.carOutColor" readonly required placeholder="请选择颜色" required /><input type="text" name="carOutColor" v-model="routerParams.carOutColor" class="none" /></div>
										<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
									</div>
								</item>
								<item>
									<div class="car-enitor-tr on" @click="carInColorFn">
										<div class="car-editor-name">内饰颜色</div>
										<div class="car-editor-input"><input type="text" v-model="routerParams.carInColor" readonly required placeholder="请选择颜色" /><input type="text" name="carInColor" v-model="routerParams.carInColor" class="none" /></div>
										<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
									</div>
								</item>
								<item>
									<div class="car-enitor-tr on" @click="carTypeNameFn">
										<div class="car-editor-name">车身类型</div>
										<div class="car-editor-input"><input type="text" class="y-item-input" name="" v-model="routerParams.carType.carTypeName" placeholder="请选择车身类型" readonly><input type="hidden" name="carTypeId" v-model="routerParams.carTypeId" /></div>
										<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
									</div>
								</item>
								<item>
									<div class="car-enitor-tr on active" @click="carGearboxFn">
										<div class="car-editor-name">变速箱</div>
										<div class="car-editor-input"><input type="text" v-model="routerParams.carGearbox" readonly name="carGearbox" required placeholder="请输入变速箱" /></div>
										<div class="car-editor-right"></div>
									</div>
								</item>
								<!-- <item>
									<div class="car-enitor-tr on">
										<div class="car-editor-name">车门数量</div>
										<div class="car-editor-input"><input type="number" v-model="routerParams.carDoorNum" name="carDoorNum" placeholder="请输入车门数量" /></div>
										<div class="car-editor-right">个</div>
									</div>
								</item> -->
								<item>
									<div class="car-enitor-tr on">
										<div class="car-editor-name active">过户次数</div>
										<div class="car-editor-input"><input type="number" v-model="routerParams.carTransferNum" name="carTransferNum" placeholder="请输入过户次数" min="1" max="99" /></div>
										<div class="car-editor-right">次</div>
									</div>
								</item>
								<item>
									<div class="car-enitor-tr on active">
										<div class="car-editor-name">排量</div>
										<div class="car-editor-input"><input type="number" step="0.01" v-model="turbineNum" name="carDisplacement" required placeholder="请输入排量" min="0.1" max="99.9" /></div>
										<div class="car-editor-right">
											{{turbine}}
											<!-- <input type="text" class="none" v-model="turbineChange"  /> -->
										</div>
										<!--<input type="text" v-model="" />-->
									</div>
								</item>
								<item>
									<div class="car-enitor-tr on">
										<div class="car-editor-name">涡轮增压</div>
										<div class="car-editor-right">
											<div class="item item-borderless item-toggle von-toggle">
												<label class="toggle toggle-balanced">
											            <input type="checkbox" v-model="turbineIs">
											            <div class="track">
											            	<div class="handle"></div>
											            </div>
											        </label>
											</div>
										</div>
										<input type="hidden" name="carInletModel" :value="turbineIs?'T':'L'">
									</div>
								</item>
								<item>
									<div class="car-enitor-tr on">
										<div class="car-editor-name">延保服务</div>
										<div class="car-editor-right">
											<div class="item item-borderless item-toggle von-toggle">
												<label class="toggle toggle-balanced">
										            <input type="checkbox" v-model="carExtendedWarranty">
										            <div class="track">
										            	<div class="handle"></div>
										            </div>
										        </label>
											</div>
										</div>
										<input type="hidden" name="carExtendedWarranty" :value="carExtendedWarranty?1:0">
										<!--<input type="text" v-model="" />-->
									</div>
								</item>
								<item>
									<div class="car-enitor-tr on">
										<div class="car-editor-name">金融服务</div>
										<div class="car-editor-right">
											<div class="item item-borderless item-toggle von-toggle">
												<label class="toggle toggle-balanced">
										            <input type="checkbox" v-model="carFinanceService">
										            <div class="track">
										            	<div class="handle"></div>
										            </div>
										        </label>
											</div>
										</div>
										<input type="hidden" name="carFinanceService" :value="carFinanceService?1:0">
										<!--<input type="text" v-model="" />-->
									</div>
								</item>
								<!-- <item>
									<div class="car-enitor-tr on">
										<div class="car-editor-name">新车指导价</div>
										<div class="car-editor-input"><input type="number" step="0.01" v-model="routerParams.carGuidePrice" name="carGuidePrice" placeholder="请输入新车指导价"  /></div>
										<div class="car-editor-right">万元</div>
									</div>
								</item> -->
								<item>
									<div class="car-enitor-tr on active" @click="carPurposeFn">
										<div class="car-editor-name">车辆用途</div>
										<div class="car-editor-input"><input type="text" readonly :value="routerParams.carPurpose | filterCarPurpose" placeholder="请选择车辆用途" required="required" /></div>
										<input type="hidden" name="carPurpose" v-model="routerParams.carPurpose" />
										<div class="car-editor-right"></div>
									</div>
								</item>
								<item v-if="routerParams.shopId">
									<div class="car-enitor-tr on active" @click="saleDealUserIdFn">
										<div class="car-editor-name">销售员工</div>
										<div class="car-editor-input"><input type="text" readonly v-model="routerParams.user.userName" placeholder="请选择销售员工" required="required" /></div>
										<input type="hidden" name="saleUserId" v-model="routerParams.saleUserId" />
										<div class="car-editor-right"></div>

									</div>
								</item>
								<item>
									<div class="car-enitor-tr on">
										<div class="car-editor-name">是否面议</div>
										<div class="car-editor-right">
											<div class="item item-borderless item-toggle von-toggle">
												<label class="toggle toggle-balanced">
											            <input type="checkbox" v-model="negoIs">
											            <div class="track">
											            	<div class="handle"></div>
											            </div>
											        </label>
											</div>
										</div>
										<!--<input type="text" v-model="" />-->
									</div>
								</item>
								<div v-if="!negoIs">
                  <!-- <item @click.native="carRetailAboutFn" v-if="routerParams.carLicenceState == 1" >
                    <div class="car-enitor-tr">
                      <div class="car-editor-name">建议零售价：</div>
                      <div class="car-editor-input"><input type="text" v-model="routerParams.carRetailAbout" readonly placeholder="点击获取估值" ></div>
                      <input type="hidden" name="carValuationJson" v-model="routerParams.carValuationJson">
                    </div>
                  </item> -->
                  <item>
                    <div class="car-enitor-tr active">
                      <div class="car-editor-name">零售价</div>
                      <div class="car-editor-input"><input type="number" required step="0.01" min="0.01" max="99.99" v-model="routerParams.carRetailPrice" name="carRetailPrice" placeholder="请输入零售价" v-focus-to-top /></div>
                      <div class="car-editor-right">万元</div>
                    </div>
                  </item>
                </div>
								<input v-else type="text" class="none" name="carRetailPrice" value="0" />
								<!-- <item>
									<div class="car-enitor-tr on">
										<div class="car-editor-name">销售底价</div>
										<div class="car-editor-input"><input type="number" step="0.01" v-model="routerParams.carFloorPrice" name="carFloorPrice" placeholder="请输入销售底价"  /></div>
										<div class="car-editor-right">万元</div>
									</div>
								</item> -->
								<!-- <item>
									<div class="car-enitor-tr on">
										<div class="car-editor-name">完税价</div>
										<div class="car-editor-input"><input type="number" step="0.01" v-model="routerParams.carTaxPrice" name="carTaxPrice" placeholder="请输入完税价"  /></div>
										<div class="car-editor-right">万元</div>
									</div>
								</item> -->
								<!-- <item>
									<div class="car-enitor-tr on active">
										<div class="car-editor-name">展厅价</div>
										<div class="car-editor-input"><input type="number" required step="0.01" v-model="routerParams.carShowPrice" name="carShowPrice" placeholder="请输入展厅价"  /></div>
										<div class="car-editor-right">万元</div>
									</div>
								</item> -->
								<!-- <item>
									<div class="car-enitor-tr on">
										<div class="car-editor-name">网络价</div>
										<div class="car-editor-input"><input type="number" step="0.01" v-model="routerParams.carNetworkPrice" name="carNetworkPrice" placeholder="请输入网络价" /></div>
										<div class="car-editor-right">万元</div>
									</div>
								</item> -->
								<!-- <item>
									<div class="car-enitor-tr on">
										<div class="car-editor-name">黄色预警库龄</div>
										<div class="car-editor-input"><input type="number" v-model="routerParams.carYellowAge" name="carYellowAge" placeholder="请输入黄色预警库龄" /></div>
										<div class="car-editor-right">天</div>
									</div>
								</item>
								<item>
									<div class="car-enitor-tr on">
										<div class="car-editor-name">红色预警库龄</div>
										<div class="car-editor-input"><input type="number" v-model="routerParams.carRedAge" name="carRedAge" placeholder="请输入红色预警库龄" /></div>
										<div class="car-editor-right">天</div>
									</div>
								</item> -->
								<item>
									<div class="car-enitor-tr on">
										<div class="car-editor-name">补充说明</div>
										<div class="car-editor-input"><input v-focus-to-top type="text" v-model="routerParams.carTaxPrice" name="carTaxPrice" placeholder="请输入补充说明" /></div>
										<div class="car-editor-right"></div>
									</div>
								</item>
							</list>
							<input type="number" name="carId" v-model="routerParams.carId" style="display: none;" />
						</div>
					</div>
				</div>
			</div>
		</form>
		<transition name="bottom" v-for="(item,index) in paramsIs">
			<keep-alive>
				<modal :paramsIs="paramsIs" :itemIndex="index" />
			</keep-alive>
		</transition>
		<transition name="bottom">
			<keep-alive>
				<brand :paramsIs="paramsIs" v-if="paramsBrand" @brandDelete="brandDelete" @brandComplete="brandComplete" />
			</keep-alive>
		</transition>
		<reject v-if="routerParams.carStockState == 1" :carId="routerParams.carId" ></reject>  
	</div>
</template>

<script>
	import brandModal from '../add/brand.vue'
	import modal from 'src/assembly/modalList'
	import gearboxModal from '../add/gearbox.vue'
	import brand from 'src/assembly/brand'
	import reject from 'src/assembly/reject.vue'
	import { bus } from 'bus.js'
	export default {
		data() {
			return {
				carBusinessInsuranceDateTrue: true,
				paramsData: {},
				getJson: {
					params: {},
					getParams: {
						saleDealUserId: {
							name: '',
							id: '',
						}
					}
				},
				paramsIs: [],
				paramsBrand: false,
				turbine: 'L',
				turbineIs: false,
				negoIs: false,
				carFinanceService: false,
				carExtendedWarranty: false,
				turbineNum: undefined,
				carVin: '',
				routerParams: {
					brand: {},
					carType: {},
					region: {},
					shop: {},
					carImages: [],
					user: {},
					series: {},
				},
				backfill: {},
				carConfIds: [],
			}
		},
		components: {
			modal,
			brand,
			reject
		},
		created() {
			this.paramsImgPush()
		},
		mounted: function() {
			this.busOn()
			this.getData()
			$modal.fromComponent(brandModal, {
				title: '选择品牌',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.brandModal = modal;
			});
			$modal.fromComponent(gearboxModal, {
				title: '变速箱',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.gearboxModal = modal;
			});

			bus.$on('gearbox', (text) => {
				this.routerParams.carGearbox = text;
				this.gearboxModal.hide();
			});
			bus.$on('brandId', (text) => {
				this.routerParams.brandId = text;

			});

			bus.$on('brandName', (text) => {
				this.routerParams.brand.brandName = text;
			});

			bus.$on('seriesId', (text) => {
				this.routerParams.seriesId = text;
			});

			bus.$on('seriesName', (text) => {
				this.routerParams.series.seriesName = text;
			});

			bus.$on('modelId', (text) => {
				this.routerParams.modelId = text;
				this.brandModal.hide();
			});

			bus.$on('modelName', (text) => {
				this.routerParams.carTitle = this.routerParams.brand.brandName + this.routerParams.series.seriesName + this.routerParams.model.modelName
			});
			bus.$off('saleDealUserId')
			bus.$on('saleDealUserId', (index) => {
				this.routerParams.user.userName = this.paramsIs[0].list[index].name
				this.routerParams.saleUserId = this.paramsIs[0].list[index].id
				this.paramsIs = []
			})

		},
		computed: {
			userSession() {
				return sess.get('userSession')
			},
			turbineChange() {
				return parseFloat(this.turbineNum).toFixed(1) + this.turbine
			},
			carLicenceDate: {
				get () {
					return this.handleDate('yyyy-MM', this.routerParams.carLicenceDate)
				},
				set (value) {
					this.routerParams.carLicenceDate = value
				}
			},
			carValidateDate : {
				get () {
					return this.handleDate('yyyy-MM', this.routerParams.carValidateDate)
				},
				set (value) {
					this.routerParams.carValidateDate = value
				}
			},
			carBusinessInsuranceDate : {
				get () {
					return this.handleDate('yyyy-MM', this.routerParams.carBusinessInsuranceDate)
				},
				set (value) {
					this.routerParams.carBusinessInsuranceDate = value
				}
			},
			carForceInsuranceDate : {
				get () {
					return this.handleDate('yyyy-MM', this.routerParams.carForceInsuranceDate)
				},
				set (value) {
					this.routerParams.carForceInsuranceDate = value
				}
			}

		},
		methods: {
			// 时间过滤
			handleDate (format, value) {
      var _type = format
      var _date = new Date(value || '')
      return _type
        .replace(/(y{4})/, _date.getFullYear())
        .replace(/(M{2})/, function(){ return _date.getMonth() < 9 ? '0' + (_date.getMonth() + 1) : (_date.getMonth() + 1)})
    },
			// 查询估值
    carRetailAboutFn () {
      if (!this.routerParams.modelId && !this.routerParams.carMileage && !this.routerParams.carLicenceDate){
        window.$toast.show('请输入车型、里程、上牌时间')
        return false
      }
      window.axios.get(baseUrl + '/controller/che300/getChe300CarPrice', {params: {
        mile: this.carMileage,
        modelId: this.modelId,
        zone: '101010',
        regDate: this.carLicenceDate
      }}).then(res => {
        let resu = res.data.result
        if (resu[0].status == 1) {
          this.carRetailAbout = `${resu.filter(item => item.valuationCondition == 'normal')[0].valuationDealerLowSoldPrice} 万 ~ ${resu.filter(item => item.valuationCondition == 'excellent')[0].valuationDealerHighSoldPrice} 万`
          
        } else {
          setTimeout(() => {
            window.$toast.show('未找到相关数据')
          }, 400)
          
        }
        this.carValuationJson = JSON.stringify(resu)
        
      })
    },
			carGearboxFn() {
				this.gearboxModal.show();
			},
			//员工选择
			saleDealUserIdFn() {

				window.axios.get(baseUrl + '/controller/getUserList', {
					params: {
						shopId: this.routerParams.shopId,
						imageViewId: 2,
					}
				}).then((res) => {
					this.paramsIs.push({
						list: [],
						title: '销售员工',
						emit: 'saleDealUserId',
					})
					for(let item of res.data.result) {
						this.paramsIs[0].list.push({
							name: item.userName,
							id: item.userId
						})
					}
				})

			},
			getData() {
				window.axios.get(baseUrl + '/controller/getCarById', {
					params: {
						carId: this.$route.query.carId
					}
				}).then((res) => {
					this.routerParams = res.data.result
					this.turbineNum = parseFloat(this.routerParams.carDisplacement).toFixed(1)
					if(this.routerParams.carDisplacement.indexOf('L') == -1) {
						this.turbineIs = true
					}
					this.carFinanceService = this.routerParams.carFinanceService
					this.carExtendedWarranty = this.routerParams.carExtendedWarranty
					this.carVin = this.routerParams.carVin
					if(!this.routerParams.carRetailPrice) {
						this.negoIs = true
					} else {
						this.negoIs = false
					}
					this.paramsImgPush()
				})
			},
			//图片回填
			paramsImgPush() {
				bus.$carImgChange = []
				for(let i of this.routerParams.carImages) {
					bus.$carImgChange.push({
						imgKey: i.imageKey,
						imgId: i.imageId,
						imgUrl: i.imageUrl
					})
				}
				this.$nextTick().then(() => {
					setTimeout(() => {
						this.$watch('carVin', function() {
							this.carVin = this.carVin.toUpperCase()
							//							if(this.carVin.length == 17) {
							//								this.getModelInfoByVin()
							//							}
						})
					}, 200)
				})
			},
			//			//车场区域
			busOn() {
				bus.$off('regionName')
				bus.$off('shopName')
				bus.$off('carKeyNum')
				bus.$off('carOutColor')
				bus.$off('carInColor')
				bus.$off('carTypeName')
				bus.$off('carLicenceStatus')
				bus.$on('regionName', (index) => {
					this.routerParams.regionId = this.paramsIs[0].list[index].id
					this.routerParams.region.regionName = this.paramsIs[0].list[index].name
					this.paramsIs = []
				})
				bus.$on('shopName', (index) => {
					this.routerParams.shopId = this.paramsIs[0].list[index].id
					this.routerParams.shop.shopName = this.paramsIs[0].list[index].name
					this.routerParams.user.userName = ''
					this.routerParams.saleUserId = ''
					this.paramsIs = []
				})

				bus.$on('carKeyNum', (index) => {
					this.routerParams.carKeyNum = this.paramsIs[0].list[index].id
					this.paramsIs = []
				})

				bus.$on('carOutColor', (index) => {
					this.routerParams.carOutColor = this.paramsIs[0].list[index].name
					this.paramsIs = []
				})

				bus.$on('carInColor', (index) => {
					this.routerParams.carInColor = this.paramsIs[0].list[index].name
					this.paramsIs = []
				})

				bus.$on('carTypeName', (index) => {
					this.routerParams.carTypeId = this.paramsIs[0].list[index].id
					this.routerParams.carType.carTypeName = this.paramsIs[0].list[index].name
					this.paramsIs = []
				})

				bus.$on('carLicenceStatus', (index) => {
					this.routerParams.carLicenceState = this.paramsIs[0].list[index].id
					this.paramsIs = []
				})
				bus.$off('carPurposeName')
				bus.$on('carPurposeName', index => {
					this.routerParams.carPurpose = this.paramsIs[0].list[index].id
					this.paramsIs = []
				})
			},
			carPurposeFn () {
				this.paramsIs.push({
					list: [{name: '营运', id:1},{name: '非营运', id:2},{name: '营转非', id:3}],
					title: '使用性质',
					emit: 'carPurposeName',
				})
			},
			regionNameFn() {
				window.axios.get(baseUrl + '/controller/getRegionList', {
					params: {
						marketId: this.routerParams.marketId
					}
				}).then((res) => {
					this.paramsIs.push({
						list: [],
						title: '车场区域',
						emit: 'regionName',
					})
					for(let item of res.data.result) {
						this.paramsIs[0].list.push({
							name: item.regionName,
							id: item.regionId
						})
					}
				})
			},
			//商铺列表
			shopNameFn() {
				window.axios.get(baseUrl + '/controller/getShopList', {
					params: {
						marketId: this.routerParams.marketId,
						shopState: 1,
					}
				}).then((res) => {
					this.paramsIs.push({
						list: [],
						title: '商铺列表',
						emit: 'shopName',
					})
					for(let item of res.data.result) {
						this.paramsIs[0].list.push({
							name: item.shopName,
							id: item.shopId
						})
					}
				})
			},
			// 品牌车系
			brandNameFn() {
				this.brandModal.show();
				//				this.paramsBrand = true
			},
			carKeyNumFn() {
				this.paramsIs.push({
					list: [{
						id: 1,
						name: 1
					}, {
						id: 2,
						name: 2
					}, {
						id: 3,
						name: 3
					}, {
						id: 4,
						name: 4
					}, {
						id: 5,
						name: 5
					}],
					title: '钥匙数量',
					emit: 'carKeyNum',
				})
			},
			brandDelete() {
				this.paramsBrand = false
			},
			brandComplete(value) {
				this.paramsBrand = false
				this.routerParams.brandId = value.brand.id
				this.routerParams.brand.brandName = value.brand.name
				this.routerParams.modelId = value.model.id
				this.routerParams.model.modelName = value.model.name
				this.routerParams.seriesId = value.series.id
				this.routerParams.series.seriesName = value.series.name
				this.routerParams.carTitle = value.brand.name + ' ' + value.series.name + ' ' + value.model.name
			},
			//外观颜色
			carOutColorFn() {
				window.axios.get(baseUrl + '/controller/getColorList').then((res) => {
					this.paramsIs.push({
						list: [],
						title: '外观颜色',
						emit: 'carOutColor',
					})
					//					console.log(res)
					for(let item of res.data.result) {
						this.paramsIs[0].list.push({
							name: item.colorName,
							id: item.colorId
						})
					}
				})
			},
			//内饰颜色
			carInColorFn() {
				window.axios.get(baseUrl + '/controller/getColorList').then((res) => {
					this.paramsIs.push({
						list: [],
						title: '内饰颜色',
						emit: 'carInColor',
					})
					//					console.log(res)
					for(let item of res.data.result) {
						this.paramsIs[0].list.push({
							name: item.colorName,
							id: item.colorId
						})
					}
				})
			},
			//车身类型
			carTypeNameFn() {
				window.axios.get(baseUrl + '/controller/getCarTypeList').then((res) => {
					this.paramsIs.push({
						list: [],
						title: '车身类型',
						emit: 'carTypeName',
					})
					//					console.log(res)
					for(let item of res.data.result) {
						this.paramsIs[0].list.push({
							name: item.carTypeName,
							id: item.carTypeId
						})
					}
				})
			},
			//是否上牌
			carLicenceStatusFn() {
				this.paramsIs.push({
					list: [{
						name: '已上牌',
						id: 1
					}, {
						name: '未上牌',
						id: 2
					}, {
						name: '新车',
						id: 3
					}],
					title: '是否上牌',
					emit: 'carLicenceStatus',
				})

			},

			submit() {
				//				console.log(this.$route.query.params)

			},
			nextStep(event) {
				if(!(this.routerParams.shopId)) {
					$toast.show('请选择商铺', 2000)
					return
				}
				if(!(this.routerParams.modelId)) {
					$toast.show('请选择品牌、车型、车系', 2000)
					return
				}
				if(!(this.routerParams.carLicenceState)) {
					$toast.show('请选择是否上牌', 2000)
					return
				}
				if(!(this.routerParams.regionId)) {
					$toast.show('请选择车场区域', 2000)
					return
				}
				if(!(this.routerParams.saleUserId)) {
					$toast.show('请选择销售员工', 2000)
					return
				}
				if(!(this.routerParams.carPurpose)) {
					$toast.show('请选择车辆用途', 2000)
					return
				}
				

				if(this.$refs.carLicenceDate) {
					let carLicenceDate = new Date(Date.parse(this.$refs.carLicenceDate.value))
					let presentTime = new Date()
					if(carLicenceDate.getFullYear() > presentTime.getFullYear() || (carLicenceDate.getFullYear() == presentTime.getFullYear() && carLicenceDate.getMonth() > presentTime.getMonth())) {
						$toast.show('首次上牌年月大于本月', 2000)
						return
					}
				}

				var formData = new FormData(event.target);
				//				let carFuels
				//				if(this.backfill.modelFuelRoz.indexOf('汽油') != -1) {
				//					carFuels = '汽油'
				//				} else if(this.backfill.modelFuelRoz.indexOf('柴油') != -1) {
				//					carFuels = '柴油'
				//				} else if(this.backfill.modelFuelRoz.indexOf('混合动力') != -1) {
				//					carFuels = '混合动力'
				//				} else {
				//					carFuels = ''
				//				}
				//				formData.append('carEnviron', this.backfill.modelEnviron)
				//				formData.append('carFuel', carFuels)
				//				formData.append('carConfIds', this.carConfIds)
				window.axios.post(baseUrl + '/controller/car/updateCar', formData).then((data) => {
					if(data) {
						setTimeout(() => {
							sess.set('carId', this.routerParams.carId);
							sess.set('modelId', this.routerParams.modelId);
							$router.push({
								path: '/shelves_step2',
								query: {
									carId: this.routerParams.carId
								}
							})
						}, 20)

					}
				})

			},
			userIs() {
				if(!(this.userSession)) {
					$toast.show('请登录', 2000)
					setTimeout(() => {
						this.$router.push({
							path: '/'
						})
					}, 1000)

				}
				//			console.log(this.$router)
				if(!(this.$route.query.params.carId)) {
					$toast.show('获取失败', 2000).then(() => {

					})
					setTimeout(() => {
						this.$router.go(-1)
					}, 1000)

				}
			},
			modelChange() {
				this.backfill.modelConf.map(item => {
					item.childCarConf.map(itemto => {
						if(itemto.selectedState) {
							this.carConfIds.push(itemto.confId)
						}
					})
				})
			},
			backfillFn(obj) {
				this.routerParams.brand.brandName = obj.brand.brandName
				this.routerParams.brandId = obj.brand.brandId
				this.routerParams.series.seriesName = obj.series.seriesName
				this.routerParams.seriesId = obj.series.seriesId
				this.routerParams.model.modelName = obj.modelName
				this.routerParams.modelId = obj.modelId
				this.routerParams.carTitle = `${obj.brand.brandName} ${obj.series.seriesName} ${obj.modelName}`
				this.turbineNum = obj.modelDisplacement
				this.turbineIs = obj.modelInletModel == 'T' ? true : false
				this.routerParams.carGearbox = obj.modelGearboxModality
				this.modelChange()
			},
			fileClick() {
				let options = {
          effect: 'scale',
          title: '',
          buttons: [
            {text: 'VIN码拍照'},
            {text: '行驶证拍照'},
          ],
          showClose:true,
        }
      	let popup = $popup.fromTemplate('<p style="margin-bottom: 0; text-align: center;">请选择拍照方式</p>', options)
      	popup.show().then((buttonIndex) => {
          if(buttonIndex===1){
          	this.getInterface = 'driverlicenseocr'
          }else if(buttonIndex===0){
          	this.getInterface = 'generalocr'
          }else{
          	return 
          }
          let u = navigator.userAgent, app = navigator.appVersion; 
					if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){
						this.$refs['fileImg'].click()
					}else{
						this.$refs['fileImg'].click()
						this.$refs['fileImg'].click()
					}
        })
			},
			fileFn() {
				var _this = this
				var reader = new FileReader();
				reader.readAsDataURL(this.$refs.fileImg.files[0])
				reader.onloadend = function() {
					_this.value = reader.result
					_this.filePost(reader.result.match(/,(\S*)/)[1])

				}

			},
			filePost(Url) {
				let instance = axios.create({
					headers: {
						'Authorization': 'DP92m1bWVrMOm/xAZjfZQqQIhpxhPTEwMTI1NDE4Jms9QUtJRHBZQm1EVGY4YTlkdzQwNHJmSnJzbVdDNE5XVU1iOW9JJmU9MTUyODk1NTg2NCZ0PTE1MjYzNjM4NjMmcj0zODE5NDY0MDUxJnU9NjIzNjMwMzAy',
						'content-type': 'text/json'
					},
				});
				$loading.show('拼命加载中..');
				if(this.getInterface == 'generalocr') {

					instance({
						method: 'post',
						url: 'https://api.youtu.qq.com/youtu/ocrapi/' + this.getInterface,
						data: {

							"app_id": "10125418",
							"image": Url
						}
					}).then(res => {
						$loading.hide();
						this.$refs.fileImg.value = ''
						if(res) {
							res.data.items.map(item => {
								if(item.itemstring.replace(/\s+/g, "").length == 17) {
									this.carVin = item.itemstring.replace(/\s+/g, "")
								}
							})

						}
					}).catch(err => {
						$loading.hide();
						this.$refs.fileImg.value = ''
						setTimeout(() => {
							$toast.show('服务器繁忙,请稍后再试', 2000);
						}, 400)

					})
				} else {
					instance({
						method: 'post',
						url: 'https://api.youtu.qq.com/youtu/ocrapi/' + this.getInterface,
						data: {
							"type": 0,
							"app_id": "10125418",
							"image": Url
						}
					}).then(res => {
						$loading.hide();
						this.$refs.fileImg.value = ''
						if(res) {
							res.data.items.map(item => {
								if(item.itemstring.replace(/\s+/g, "").length == 17) {
									this.carVin = item.itemstring.replace(/\s+/g, "")
								}
							})
						}
					}).catch(err => {
						$loading.hide();
						this.$refs.fileImg.value = ''
						setTimeout(() => {
							$toast.show('服务器繁忙,请稍后再试', 2000);
						}, 400)

					})
				}
			},
			getModelInfoByVin() {
				axios.get(baseUrl + '/controller/model/getModelInfoByVin', {
					params: {
						vin: this.carVin
					}
				}).then(res => {
					if(res.data.result.length == 1) {
						this.backfill = res.data.result[0]
						this.backfillFn(res.data.result[0])
					} else if(res.data.result.length > 1) {
						this.getJson.paramsIs.push({
							list: [],
							title: '车型选择',
							emit: 'modelChoice',
						})
						for(let item of res.data.result) {
							this.getJson.paramsIs[0].list.push({
								name: `${item.brand.brandName} ${item.series.seriesName} ${item.modelName}`,
								id: item
							})
						}
					} else {
						setTimeout(() => {
							$toast.show('未找到该车型信息,请手动输入', 2000);
						}, 400)
					}
				})
			},
		},
		watch: {
			'turbineIs': function() {
				if(this.turbineIs) {
					this.turbine = 'T'
				} else {
					this.turbine = 'L'
				}
			},
			'routerParams.carBusinessInsuranceDate' () {
				this.carBusinessInsuranceDateTrue = this.routerParams.carBusinessInsuranceDate ? false : true
			}

		}

	}
</script>